<!-- 添加字典 -->
<template>
    <div class=""> 
        <div class="kjknsertw">
            <div class="sdfdsyttyty display-flex">
               <div class="flex-1">
                <n-input v-model:value="form.sxname" type="text" placeholder="" />
               </div>
               <div class="ml10">
                <n-button type="info" @click="xiugaidrt"> 修改名称 </n-button>
               </div>
            </div>
            <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
                label-placement="left" class="mt20">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi span="24" label="" path="text" v-if="form.type == 1">
                        <n-input v-model:value="form.text" type="textarea" placeholder="请输入字典内容" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="" path="text" v-if="form.type == 2">
                        <div class="logo-context vertical-center " @click="photoShowModal = true"  :style="stylefun(form)">
                            <div v-if="form.text" class="w100 h100">
                                
                                <img :src="form.text" class="w100 h100 imgjz"  />
                                <p class="z9 fz12  tl">点击更换图片</p>
                            </div>
                            <span v-else>点击上传图片</span>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="" path="text" v-if="form.type == 3">
                        <div class="kjjjmsertwe" :style="{'grid-template-columns': 'repeat('+form.column+', 1fr)'}">
                            <div class="kjjjsertwwx" v-for="(item, idx) in jhhjer" :key="idx" :style="stylefun(form)">
                                <img :src="item" />
                                <i class="iconfont dx-closefill sfdgdgty" @click="closesert(idx)"></i>
                                <div class="jjnxeertrtw vertical-center">
                                    <p>
                                        <i class="iconfont dx-left cf fz32 b" @click="kjnmse(idx, 1)"> </i>
                                        <i class="iconfont dx-right cf fz30 ml10" @click="kjnmse(idx, 2)"> </i>
                                    </p>
                                </div>
                            </div>

                            <div class="logo-context vertical-center ab" @click="photoShowModaler = true">
                                <span>点击上传图片</span>
                            </div>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="" path="text" v-if="form.type == 4">
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref"></tinymce>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="" v-if="form.type == 5">
                        <n-dynamic-input v-model:value="customValue" :on-create="onCreate" show-sort-button>
                            <template #create-button-default>
                                点击添加字典
                            </template>
                            <template #default="{ value }">
                                <div style="display: flex; align-items: center; width: 100%">
                                 <div class=" flex-1">
                                  <n-input v-model:value="value.label" placeholder="label" size="medium"
                                        clearable class="w100"></n-input>
                                 </div>
                                   <div :style="stylefunw(form)" class="ml20 sdfsdstrt">
                                    <n-input v-model:value="value.value" placeholder="value"  size="medium" clearable
                                        class="w100 tl"></n-input>
                                   </div>

                                    <div class=" flex-1 ml20 display-flex">
                                      <div class=" flex-1">
                                        <n-input  
                                      v-model:value="value.extra" 
                                      placeholder="额外" 
                                      size="medium"
                                      clearable
                                      class=" w100"></n-input>
                                      </div>
                                      <div class="ml10">
                                        <n-button type="primary" size="medium" @click="addImgxztp(value)">选择图片</n-button>
                                        
                                      </div>
                                    </div>
                                </div>
                            </template>
                        </n-dynamic-input>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="" v-if="form.type == 6">
                        <div class="">
                            <draggable class="jkknkcxeeet "  :style="{'grid-template-columns': 'repeat('+form.column+', 1fr)'}"  v-model="imgtexte">
                                <template #item="{ element, index }">
                                    <div class="display-flex">
                                        
                                        <div @click="addImger(element)" class="vertical-center sdfsdfsdrtrtr" :style="stylefun(form)">
                                            <img :src="element.cover" class="fenmjhnwerw cz sz" v-if="element.cover">
                                            <span class="z9 fz14" v-else>点击上传图片</span>
                                        </div>
                                        <div class="flex-1 ml10">
                                            <n-input type="text" v-model:value="element.title" placeholder="标题"
                                                size="medium" clearable @change=""></n-input>

                                            <n-input type="text" v-model:value="element.url" placeholder="跳转链接"
                                                size="medium" clearable @change="" class="mt10"/>
                                                
                                            <n-input type="textarea" v-model:value="element.details" placeholder="请输入简介"
                                                size="medium" clearable @change="" class="mt10"
                                                :autosize="{ minRows: 2 }"></n-input>
                                            <div  @click="jdjsfsdfg(element)" class="mt10 sz">
                                                <div class="fxfgfretxcrw">
                                                  <div v-html="element.xq"></div>
                                                </div>
                                             <p class="ls  sz">
                                                 <i class="iconfont dx-wenbenbianji"></i> 点击编辑详情
                                              </p>
                                            </div>

                                        </div>
                                        <div class="deklkjnseer vertical-center" @click="delsee(index)">
                                            删除
                                        </div>
                                    </div>
                                </template>
                            </draggable>
                        </div>
                        <div class="addImwen vertical-center mt20" @click="addImglist">
                            +点击添加图文
                        </div>
                    </n-form-item-gi>



                    <n-form-item-gi span="24" label="字典内容:" path="text" v-if="form.type == 7">
                        <draggable class=" kjjjmsertwe"   
                         :style="{ 'grid-template-columns': 'repeat(' + form.column + ', 1fr)'}"  
                         v-model="jhhjerVideo">
                            <template #item="{ element, index }">
                                <div class="kjjjsertwwx" :style="stylefun(form)">
                                    <img :src="element.imgurl" />
                                    <i class="iconfont dx-closefill sfdgdgty" @click="closeserter(index)"></i>
                                </div>
                            </template>
                        </draggable>

                        <div class="kjjjmsertwe mt10">
                            <div class="logo-context vertical-center ab" @click="photoShowModalsi = true">
                                <span>点击上传视频</span>
                            </div>
                        </div>

                    </n-form-item-gi>





                    <n-form-item-gi span="24" label="&nbsp;">
                        <n-button type="primary" size="medium" @click="handleValidateClick">保存</n-button>
                        <!-- <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button> -->
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>字典图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" :types="'字典图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>字典图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" :types="'字典图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>字典图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" :types="'字典图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalxztp" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>选择图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImgxztp" :types="'选择图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalxztp = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgxztp"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="photoShowModalsi" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>视频</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsi" :types="'视频' + Userid" accept=".mp4"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsi = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
                </div>
            </template>
        </n-modal>




        <n-modal v-model:show="kxscert" preset="card" class="kzxcxdffrtret">
      <template #header>
        <div>编辑内容</div>
      </template>
      <div class="w100 h100">
        <tinymce ref="kjmxxd" :htmlNr="htmlNr"></tinymce>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="kxscert = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="cvxvxrcvgrt">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue"
import { dxget, dxpost, qurl, hf, transferTimeYMD, callBack } from "../../../util/index";
import photoGallery from "../../../components/util/photoGallery";
import tinymce from "../../../components/util/tinymce.vue"
import Draggable from 'vuedraggable'
const props = defineProps({
    id: {
        type: Number,
    },
});
const apiurl = "dxgjAdmin/dxDictionarymanagement"
const roid = localStorage.id
const formRef = ref()
const tinymceref = ref()
const photoShowModalsi = ref(false)
const cz = qurl()
const isbj = ref(false) // 是否为编辑状态
const jhhjer = ref([])
const jhhjerVideo = ref([])
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const photoShowModalsan = ref(false)
const photoShowModalxztp = ref(false)
const imgtexte = ref([])
const customValue = ref([])
const Userid = ref(localStorage.id)
const kjmxxd = ref()
const htmlNr= ref()
const kxscert= ref()
const xcdfd =ref()
const emit = defineEmits(["saveSuccess"]);
const form = ref({
    zdkey: "",
    sxname: "",
    text: "",
    column:3,
    roleId: localStorage.id,
    type: 1
})
const kjnmse = (idx, type) => {
    if (type == 1 && idx > 0) {
        [jhhjer.value[idx - 1], jhhjer.value[idx]] = [jhhjer.value[idx], jhhjer.value[idx - 1]]
    }
    console.log(jhhjer.value.length < idx);
    if (type == 2 && (jhhjer.value.length - 1) > idx) {
        [jhhjer.value[idx + 1], jhhjer.value[idx]] = [jhhjer.value[idx], jhhjer.value[idx + 1]]
    }
}
const rules = {
    zdkey: {
        required: true,
        message: '请输入字典标签',
        trigger: 'blur'
    },
    text: {
        required: true,
        message: '请输入字典内容',
        trigger: 'blur'
    },
}
const onCreate = () => {
    return {
        label: "",
        value: ""
    }
}
const initData = async () => {
    const { data }: any = await dxget(apiurl, { id: props.id ,roleId:roid})
    form.value = data
    if (form.value.type == 3) {
        jhhjer.value = form.value.text.split(",")
    }
    if (form.value.type == 4) {
        console.log(data.text);
        nextTick(() => {
            tinymceref.value.setContent(data.text)
        })
    }
    if (form.value.type == 5) {
        customValue.value = JSON.parse(form.value.text)
    }
    if (form.value.type == 6) {
        imgtexte.value = JSON.parse(form.value.text)
    }
    if (form.value.type == 7) {
        jhhjerVideo.value = JSON.parse(form.value.text)
    }

}
const closeserter = (idx) => {
    jhhjerVideo.value.splice(idx, 1)
}

const fdstytyt = (e) => {
    form.value.text = ''
    form.value.type = e
}
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.text = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    jhhjer.value.push(jjnmnxeer)
    photoShowModaler.value = false;
};

const djjher = ref()

let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    djjher.value.cover = jjnmnxesan
    photoShowModalsan.value = false;
};
const addImger = (data) => {
    photoShowModalsan.value = true
    djjher.value = data
}


const djjhxztp = ref()

let jjnmnxexztp = "";
const getImgxztp = (data) => {
  jjnmnxexztp = data;
};
const setImgxztp = () => {
    djjhxztp.value.extra = jjnmnxexztp
    photoShowModalxztp.value = false;
};
const addImgxztp = (data) => {
    photoShowModalxztp.value = true
    djjhxztp.value = data
}





const closesert = (idx) => {
    jhhjer.value.splice(idx, 1)
}

let jjnmnxesi = "";
const getImgsi = (data) => {
    jjnmnxesi = data;
};
const setImgsi = () => {
    jhhjerVideo.value.push(jjnmnxesi)
    photoShowModalsi.value = false;
};

const handleValidateClick = (e) => { 
    e.preventDefault();
    if (form.value.type == 3) {
        form.value.text = jhhjer.value.join(",")
    }
    if (form.value.type == 4) {
        form.value.text = tinymceref.value.getContent().trim()
        form.value.jianjie = tinymceref.value.gettext().trim().slice(0, 300);
    }
    if (form.value.type == 5) {
        form.value.text = JSON.stringify(customValue.value)
    }
    if (form.value.type == 6) {
        form.value.text = JSON.stringify(imgtexte.value)
    }
    if (form.value.type == 7) {
      form.value.text = JSON.stringify(jhhjerVideo.value)
    }
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            const { errno }: any = await dxpost(apiurl, form.value, 'put')
            if (errno == 0) {
                emit("saveSuccess")
                // callBack()
            }
        }
    });
}
const xiugaidrt =async()=>{
    const { errno }: any = await dxpost(apiurl, {
        id:form.value.id,
        sxname:form.value.sxname
    }, 'put')
    window.$message.success("修改成功")
}
nextTick(() => {
    if (props.id) {
        isbj.value = true
        initData()
    }
})

const addImglist = () => {
    imgtexte.value.push({
        cover: "",
        title: "",
        url: "",
        details: ""
    })
}
const delsee = (idx) => {
    imgtexte.value.splice(idx, 1)
}

const stylefun = (data)=>{
    let width = data.width+'px'
    if(!data.width){
        width = "100%"
    }
    return{
        width,
        height:(data.height||180)+'px'
    }
}
const stylefunw = (data)=>{
    return{
        width:data.width+'px'
    }
}
const jdjsfsdfg=(data)=>{
    htmlNr.value = data.xq
    xcdfd.value = data
    kxscert.value=true 
} 
const cvxvxrcvgrt= ()=>{
    const jkmxsv = kjmxxd.value.getContent();
    console.log(jkmxsv);
    xcdfd.value.xq=jkmxsv
    kxscert.value=false
}
</script>
<style scoped>
.sdfsdstrt {
    width: 150px;
}

.jkknkcxeeet {
    width: 1400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}

.kjknsertw {
    width: 100% !important;
}

.fenmjhnwerw {
    object-fit: cover;
    width: 100%;
    height: 100%;
    background: #e0e0e0;
}

.deklkjnseer {
    background: #f8f8f8;
    width: 32px;
    padding: 0 10px;
    cursor: pointer;
}

.sdfsdfsdrtrtr {
    background: #e0e0e0;
    width: 150px;
    cursor: pointer;
}

.addImwen {
    width: 200px;
    height: 170px;
    background: #e0e0e0;
    font-size: 26px;
    cursor: pointer;
}
.fwbclass{
    height: 600px;
}

.sdfdsyttyty{
    width: 400px;
}

.fxfgfretxcrw {
  overflow: auto;
  max-height: 100px;
  max-width: 300px;
}

</style>